<template>
	<div id="SHOP" :style="{height: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="购物车" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>
		<!-- 购物车 -->
		
		<div class="shopping">
			<div class="shop"
			v-for="(item,index) in lists" :key="index">
				<van-checkbox v-model="item.checked" icon-size='14px' style="width:30px;"
					
				></van-checkbox>
				<img class="loge" :src="item.src">
				<div class="shop_text">
					<div class="shopname">{{item.name}}</div>
					<div class="jiage"><span>￥</span> {{item.num}}</div>
					<div class="shop_loge">
						<van-stepper v-model="item.value" integer />
					</div>	
				</div>
					<img class="del" src="../assets/images/del.png">

			</div>
		</div>
		
		
	<!-- 	//结算 -->
		<div class="close">
			<div class="close_one">
				<van-checkbox v-model="checked" icon-size="14px" style="width:30px"

				></van-checkbox>
				<div class="qx" 
				>全选</div>
				<div class="close_text">
					<div>合计：{{heji}}</div>
					<div>数量：{{shumu}}</div>
				</div>
				
					<div class="close_d">
						<img src="../assets/images/购物车/icon.png">
						<router-link to="/FILL"><div>去结算</div></router-link>
					</div>
				
			</div>
		</div>
		
		 
	</div>
</template>
<script>
	export default {
		data() {
			return {
				currHeight: '',
				value: 1,
				checked:false,
				currHeight: '',
				heji:2000,
				shumu:1,
				active: 2,		 
				lists: [{
						checked:false,
						src:require('../assets/images/h5页面1/h5页面_2_04.png'),
						name:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
						num:'2000.0',
					},
					{
					checked:false,
						src:require('../assets/images/h5页面1/h5页面_2_04.png'),
						name:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
						num:'2000.0',
					},
				]
			};
		},
		methods: {
			 onClickLeft() {
				
				this.$router.go(-1)
				},
				onClickRight() {
				
				},
			
		},
		 mounted(){
     	 	this.currHeight = document.documentElement.clientHeight
     		 window.onresize = () => {
         	 this.currHeight = document.documentElement.clientHeight
     		 }
 		 }
	};
</script>
<style scoped lang="less">
	#SHOP{
		background: #F3F4F6;
		width: 100%;
	}
	// 购物车
	.shopping{
		padding-top: 80px;
		width: 100%;
		.shop{
			width: 100%;
			height: 210px;
			background: white;
			margin-top: 18px;
			box-sizing: border-box;
			padding:30px 36px 30px 24px;
			display: flex;
			justify-content: space-between;
			.van-checkbox{
				width: 40px;
			}
			.del{
				height: 50px;
				background: #FFFFFF;
				margin-top:100px;
			}

			.loge{
				margin-left: 20px;
				height: 150px;
			}
			.shop_text{
				margin-left: 28px;
				.shop_loge{
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
				}
				.shopname{
					font-size: 20px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #666666;
				}
				.jiage{
					font-size: 24px;
					font-family: HiraginoSansGB;
					font-weight: bold;
					color: #234497;
				}
				span{
					color:#234497;
					display: inline-block;
				}
			}
		}
	}
	//结算
	.close{
		width: 100%;
		height: 120px;
		background:white;
		overflow: hidden;
		box-sizing:border-box ;
		position:fixed;
		bottom: 0;
		overflow: hidden;
		
	.close_one{
			width: 100%;
			height:100%;
			display: flex;
			overflow: hidden;
			justify-content:flex-start;
			.van-checkbox{
				margin-left: 3%;
			}
			.qx{
				width: 10%;
				margin-top: 5%;
				margin-left:5% ;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #666666;
			}
			.close_text{
				margin-left:5%;
				width: 40%;
				margin-top:2.5%;
				div{
					font-size: 24px;
					margin-top:10px ;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #333333;
					line-height: 12px;
					height: 40%;
				}
			}
			
			 .close_d{
				margin-left:12% ;
				width: 22%;
				height: 100%;
				border-radius:20px 0  0 20px;
				background: #E1E1E1;
				box-sizing: border-box;
				padding-left:50px ;	
				line-height:50px;
				img{
					margin-top:15% ;
					width: 35px;
					margin-left:20px;
				}
				div{
					font-size: 20px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #234497;
				}
				.close_text{
					width:50% ;
				}
		}
			
		}
		
	}
</style>
